<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'attendance.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询关键字按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading"
        >导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'attendance',
  data: function () {
    return {
      api: this.$api.attendance,
      name: '线体出勤人员维护',
      columns: [
        { title: '线体', key: 'line_name', width: 140 },
        { title: '班制', key: 'shift_name', width: 120 },
        { title: '编制人力', key: 'established_human', width: 70 },
        { title: '出勤人力', key: 'attendance_human', width: 70 },
        { title: '缺勤人力', key: 'absence_human', width: 70 },
        { title: '借出人力', key: 'lend_out_human', width: 70 },
        { title: '借入人力', key: 'borrow_human', width: 70 },
        { title: '负责人', key: 'line_manager', width: 100 },
        { title: '联系方式', key: 'tel_no', width: 100 },
        { title: '邮件', key: 'email_address' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '线体',
          key: 'line_id',
          name: 'select',
          options: [],
          required: true,
          props: {
            filterable: true,
          },
          span: 12,
        },
        {
          title: '班制',
          key: 'shift_id',
          name: 'select',
          required: true,
          options: [],
          span: 12,
        },
        { title: '编制人力', key: 'established_human', name: 'number', span: 8 },
        { title: '出勤人力', key: 'attendance_human', name: 'number', span: 8 },
        { title: '缺勤人力', key: 'absence_human', name: 'number', span: 8 },
        { title: '借出人力', key: 'lend_out_human', name: 'number', span: 8 },
        { title: '借入人力', key: 'borrow_human', name: 'number', span: 8 },
        { title: '负责人', key: 'line_manager', span: 12 },
        { title: '联系方式', key: 'tel_no', span: 12 },
        { title: '邮件', key: 'email_address', span: 12 },
        { title: '宣导信息', key: 'line_notice' },
        { title: '备注', key: 'remarks', name: 'textarea' },
      ],
    }
  },
  methods: {},
  created: function () {
    this.getList()
    this.$request(this.$api.line + 'getlistbypage', { page: 1, size: 999 }).then((r) => {
      this.setFieldOptions('line_id', r.list, 'id', 'line_name')
    })
    this.$request(this.$api.shift + 'getlist', { page: 1, size: 999 }).then((r) => {
      this.setFieldOptions('shift_id', r.list, 'id', 'shift_name')
    })
  },
}
</script>
<style scoped>
</style>
